<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
         /*	字体： 大小 颜色 斜体 样式	
            
            1.大小：font-size:px em rem 默认字体大小16px
            px: 像素 一旦设置之后无法因为自适应页面的大小去发生改变
            em： 相对于父元素的字体大小来设置的
            rem： 相对于根元素（<html>）
            2.颜色 color 关键字 rgba 16进制
            3.加粗 font-weight bold bolder lighter 100-900
            4.斜体 font-style italic（倾斜）normal正常
            5.字体样式 
         */
           
     .box p{
       /* p的字体大小是2em, em取决于父元素的字体大小， 父元素的字体小是20px，所以1em = 20px 2em = 40px    	*/
     	font-size: 1em;
     }
     .box{
     	font-size: 20px;
     }
         /* 取决于html的字体大小，html是50px 1rem = 50px     */
     p{
     	font-size: 2rem;
     	color: pink;
     	font-weight: bolder;
       /* 倾斜    	*/
     	font-style: italic;
     	font-family: 宋体;
     }
     html{
     	font-size: 50px;
     }
	</style>

</head>
<body>
      <div>普通字体</div>
      <div class="box">
           <p>vip字体</p>	
      </div>
      <p>我是rem</p>
     
</body>
</html>